<template>
  <div>
    <div class="pad-20">
      <el-input @keyup.enter.native="handleSearch" v-model="taskCommissionListQuery.nickname" placeholder="微客昵称/手机号" style="width: 200px"></el-input>
      <el-date-picker
        v-model="taskCommissionListQuery.createTime"
        type="date"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="申请时间">
      </el-date-picker>
      <el-select v-model="taskCommissionListQuery.paymentStatus" placeholder="状态" @change="statusChange">
        <el-option key="待验收" label="待验收" :value="1"></el-option>
        <el-option key="已验收" label="已验收" :value="2"></el-option>
        <el-option key="已拒绝" label="已拒绝" :value="4"></el-option>
      </el-select>
      <el-date-picker
        v-model="taskCommissionListQuery.paymentime"
        type="date"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="支付时间">
      </el-date-picker>
      <el-button type="primary" plain="" @click="handleSearch">查询</el-button>
    </div>
    <div class="pad-20">
      <div class="fl flex v-align-c">
        <el-button type="primary" size="small" class="finance-add-btn" @click="handleFinanceAdd">追加酬金</el-button>
        <template v-if="remunerationTypeModel === '12'">
          <el-button type="warning" plain size="small" class="finance-add-btn" @click="exportBacth">全部导出</el-button>
            <div class="video-btn mar-l-12 mar-r-10">
              <el-upload class="avatar-uploader upload-s-style"
                         action="/api/project/taskCommission/uploadFiles"
                         accept="image/mp3"
                         list-type="picture-card-s"
                         :before-upload="beforeUpload" name="files"
                         v-loading="fileLoading"
                         :data="token" :show-file-list="false" :on-success="handleUploadSuccess">
                <i class="on-btn">导入验收</i>
              </el-upload>
            </div>
          <el-button size="small" class="finance-add-btn" @click="bacthPass(2)" v-if="taskCommissionListQuery.paymentStatus === 1">批量通过</el-button>
          <el-button size="small" class="finance-add-btn" @click="bacthPass(4)" v-if="taskCommissionListQuery.paymentStatus === 1">批量拒绝</el-button>
        </template>
      </div>
      <div class="fr">
        <span class="span-member">已托管酬金:<span class="span-member-1 font-blue">{{ taskDetail.paymentAmount }}</span></span>
        <span class="span-member-2">|</span>
        <span class="span-member">实际支付:<span class="span-member-1 font-blue">{{ taskDetail.amount }}</span></span>
        <span class="span-member-2">|</span>
        <span class="span-member">剩余:<span class="span-member-1 font-blue" style="color: red">{{ taskDetail.surplusAmount }}</span></span>
      </div>
    </div>
    <div class="pad-20">
      <el-table :data="taskCommissionList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                v-loading="listLoading" element-loading-text="加载中"
                style="width: 100%">
        <el-table-column width="55px" type="selection" align="center"></el-table-column>
        <el-table-column width="300px" label="微客" align="center">
          <template slot-scope="scope">
            <div class="flex v-align-c" align="center">
              <label><img :src="scope.row.avatar" class="user-avatar" v-if="scope.row.avatar"></label>
              <div class="font-14 pad-l-10">
                <div>昵称：{{scope.row.nickname}}</div>
                <div>姓名：{{scope.row.realName}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="结算类型" align="center">
          <template slot-scope="scope">
            {{ stageStatuss[scope.row.stageStatus] }}
          </template>
        </el-table-column>
        <el-table-column width="180" label="申请时间" prop="createTime" align="center">
        </el-table-column>
        <el-table-column width="200" label="验收标准" prop="remark" align="center">
        </el-table-column>
        <el-table-column width="150" label="状态" align="center">
          <template slot-scope="scope">
            {{ paymentStatuss[scope.row.paymentStatus] }}
          </template>
        </el-table-column>
        <el-table-column width="180" label="支付时间" prop="paymentTime" align="center">
        </el-table-column>
        <el-table-column width="250" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column min-width="160" label="备注" prop="remark" align="center">
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="taskCommissionListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="taskCommissionListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 追加酬金弹窗 -->
    <el-dialog title="在财务托管【追加酬金】后，再次点【确认打款】后微客将额外收到您追加的酬金款项" :visible.sync="financeVisible" :close-on-press-escape="true" class="payment-box" width="650px">
      <task-commission-add :taskId="taskId" v-if="financeVisible"></task-commission-add>
    </el-dialog>
  </div>
</template>

<style scoped>
  .svg-icon{
    margin-right: 6px;

  }
  .wechatRadius{
    font-size: 26px;
  }
  .alipay{
    font-size: 60px;
    height: 30px;
  }
  .radio-txt{
    vertical-align: top;
    display: inline-block;
    padding-top: 6px;
  }
  .radio-border{
    border:#ccc 1px solid;
    vertical-align: middle;
    display: inline-block;
    padding: 5px 10px;
    width: 150px;
    height: 40px;
  }
  .span-member {
    font-size: 15px;
  }
  .span-member-1 {
    margin-left: 10px;
    margin-right: 10px;
  }
  .span-member-2 {
    margin-right: 10px;
  }
  .finance-add-btn{
    margin-top: -10px;
  }
  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>

<script>
  import { pagingTaskCommission, countTaskDetail, bacthByPaymentStatus, exportBacth } from '@/api/project/taskCommission'
  import TaskCommissionAdd from '@/components/Project/TaskCommissionAdd'
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'
  // 支付表
  export default {
    components: {
      TaskCommissionAdd
    },
    props: {
      //  任务id
      taskId: {
        type: String
      },
      //  任务id
      remunerationTypeModel: {
        type: String
      }
    },
    data() {
      return {
        paymentStatuss: {},
        stageStatuss: {},
        amount: 0,
        remark: '',
        title: '',
        total: null,
        listLoading: true,
        fileLoading: false,
        financeVisible: false,
        multipleSelection: [],
        taskCommissionList: [],
        taskCommissionListQuery: {
          currentPage: 1,
          size: 10,
          createTime: '',
          paymentTime: '',
          paymentStatus: 1,
          nickname: '',
          taskId: this.taskId
        },
        taskDetail: {
          paymentAmount: 0,
          amount: 0,
          acceptanceNum: 0,
          completeNum: 0,
          memberNum: 0
        }
      }
    },
    // 过滤器
    filters: {
    },
    // 初始化页面
    created() {
      this.initTaskCommissionList()
      this.token = { accessToken: getToken(), taskId: this.taskId }
    },
    mounted() {
      const that = this
      this.$bus.$on('FinanceTaskCommission', function(data) {
        that.financeVisible = false
        that.initTaskCommissionList()
      })
    },
    methods: {
      initTaskCommissionList() {
        countTaskDetail(this.taskId).then(response => {
          this.taskDetail = response.data
        })
        this.listLoading = true
        pagingTaskCommission(this.taskCommissionListQuery).then(response => {
          if (response.isError) return
          this.taskCommissionList = response.data.records
          if (response.data.dict) {
            this.paymentStatuss = response.data.dict.paymentStatus
            this.stageStatuss = response.data.dict.stageStatus
          }
          this.total = response.data.total
          this.listLoading = false
        })
      },
      // 状态改变事件
      statusChange() {
        this.initTaskCommissionList()
      },
      exportBacth() {
        const param = {
          nickname: this.taskCommissionListQuery.nickname,
          taskId: this.taskId,
          paymentStatus: this.taskCommissionListQuery.paymentStatus,
          paymentTime: this.taskCommissionListQuery.paymentTime,
          createTime: this.taskCommissionListQuery.createTime
        }
        window.open(exportBacth(param), '_blank')
      },
      importAcceptance() {
        // conslog.log(111)
      },
      beforeUpload(file) {
        // const isWMA = file.type === 'audio/wma'
        // const isWAV = file.type === 'audio/wav'
        this.fileLoading = true
      },
      handleUploadSuccess(res, file) {
        if (res.code === 102) {
          this.$message({
            message: res.msg,
            type: 'error'
          })
          this.fileLoading = false
        }
        if (this.fileLoading) {
          if (res.code === 101) {
            this.fileLoading = false
            this.title = file.name
            this.initTaskCommissionList()
          }
        }
      },
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      bacthPass(status) {
        if (this.multipleSelection.length === 0) {
          this.$message.error('请选择需要批量操作的数据！')
          return
        }
        this.$confirm('批量操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.multipleSelection.forEach(e => {
            e.paymentStatus = status
          })
          bacthByPaymentStatus(this.multipleSelection).then(response => {
            if (response.isError) return
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.initTaskCommissionList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.taskCommissionListQuery.ascs = 'createTime'
            this.taskCommissionListQuery.descs = ''
          } else {
            this.taskCommissionListQuery.ascs = ''
            this.taskCommissionListQuery.descs = 'createTime'
          }
        }
        this.initTaskCommissionList()
      },
      handleSearch() {
        this.taskCommissionListQuery.currentPage = 1
        this.initTaskCommissionList()
      },
      handleSizeChange(val) {
        this.taskCommissionListQuery.size = val
        this.initTaskCommissionList()
      },
      handleCurrentChange(val) {
        this.taskCommissionListQuery.currentPage = val
        this.initTaskCommissionList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 详情
      handleEdit(row) {
        this.$router.push({ path: '/project/task/detail/taskCommissionDetail/index', query: { taskCommissionId: row.taskCommissionId, avatar: row.avatar, nickname: row.nickname, realName: row.realName }})
      },
      // 追加酬金
      handleFinanceAdd() {
        this.financeVisible = true
      }
    }
  }
</script>
